//global configurations
var myCoordsLenght = 6;

//adding a value change handler to color input boxes for update the marker color


//adding a key up handler to input boxes for update the marker
$(document).ready(function() {
	$('#lat,#lon').keyup(function() {
		var lat = $(this).val();
		var lon = $('#lon').val();
		var color = $('#color').val();
		
		//checking the drag enabler checkbox
		if ($('#toggle').is(':checked')){
	  		var draggable = true;
	  	}
		
		else{
			var draggable = false;
		}
		
		//check if values are empty
		if(lat != '' && lon != ''){
			initialize(lat, lon, draggable, color);
		}
		
		else if(lat == '' && lon == ''){
			initialize(null, null, null, color);
		}
		
		});
		
});


//--------------------------------------------------------------------------------------
function initialize(lat, lon, draggable, color) {
	
	//Create a div to hold the control.
	var controlDiv = document.createElement('div');

	// Set CSS styles for the DIV containing the control
	// Setting padding to 5 px will offset the control
	// from the edge of the map.
	controlDiv.style.padding = '3px';

	// Set CSS for the control border.
	var controlUI = document.createElement('div');
	controlUI.style.backgroundColor = 'white';
	controlUI.style.borderStyle = 'solid';
	controlUI.style.borderWidth = '2px';
	controlUI.style.cursor = 'pointer';
	controlUI.style.textAlign = 'center';
	controlUI.title = 'Check to drag the marker';
	controlDiv.appendChild(controlUI);

	// Set CSS for the control interior.
	var controlText = document.createElement('div');
	controlText.style.fontFamily = 'Arial,sans-serif';
	controlText.style.fontSize = '12px';
	controlText.style.paddingLeft = '4px';
	controlText.style.paddingRight = '4px';
	
	//here we check the draggable value and set the checkbox checked value according to it
	if(draggable == true){
		controlText.innerHTML = '<input type="checkbox" name="toggle" id="toggle" checked />'
			+'<strong style="position: relative; top: -3px;">Draggable</strong>';
	}
	else{
		controlText.innerHTML = '<input type="checkbox" name="toggle" id="toggle" />'
			+'<strong style="position: relative; top: -3px;">Draggable</strong>';
	}
	
	controlUI.appendChild(controlText);
	
	
	if(lat == null || lon == null){
		var myLatlng = new google.maps.LatLng(7.863382,80.590210);
	}
	
	else{
		var myLatlng = new google.maps.LatLng(lat,lon);
	}
	
	if(draggable == null){
		draggable = false;
	}
    
    var myOptions = {
      zoom: 7,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    if(color != null){
			var marker = new google.maps.Marker({
			position: myLatlng, 
			map: map,
			icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + color,
			draggable: draggable,
			title:"sri lanka"
		}); 
	}
	
	else{
		var marker = new google.maps.Marker({
        position: myLatlng, 
        map: map,
        draggable: draggable,
        title:"sri lanka"
    }); 
	}
	
    
    //adding listners
    google.maps.event.addDomListener(controlDiv, 'click', function() {
    	
    	//calling the toggler on click
		toggleDrag();

    	}); 
    google.maps.event.addListener(marker, 'dragend', function(evt){
    document.getElementById('lat').value = evt.latLng.lat().toFixed(myCoordsLenght);
    document.getElementById('lon').value = evt.latLng.lng().toFixed(myCoordsLenght);
    });
    
    controlDiv.index = 1;   
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);  

  };
  
//-------------------------------------------------------------------------------------  
  function toggleDrag(){
	//getting the current location data from inputs (if any)
	  var lat = $('#lat').val();
	  var lon = $('#lon').val();
	  var color = $('#color').val();
	  
	//user wants to disable dragging
  	if ($('#toggle').is(':checked')){
  		var draggable = false;
  		$('#toggle').attr('checked', false);
  	}
  	//user wants to enable dragging
  	else{
  		var draggable = true;
  		$('#toggle').attr('checked', true);
  	}
  	
  	if (lat == '' || lon == ''){
		initialize(null,null, draggable, color);
	}
	else{
		initialize(lat,lon, draggable, color);
	}
  }